<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="../js/global.js"></script>
	</head>
	<body>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
			<legend>系統功能模块维护</legend>
		</fieldset>
		<!-- 搜索区 -->
		<div id="searchePage" class="layui-form-item" style="margin-top: 10px;margin-left: 10px;">
			<form class="layui-form" method="post" onsubmit="return false;">
				<label class="layui-form-mid">班级名称:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="className" name="className" autocomplete="off"
						class="layui-input" />
				</div>
				<label class="layui-form-mid">起止时间:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="beginDate" id="beginDate" placeholder="yyyy-MM-dd"
						autocomplete="off" class="layui-input" />
				</div>
				<label class="layui-form-mid">--</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="endDate" id="endDate" placeholder="yyyy-MM-dd"
						autocomplete="off" class="layui-input" />
				</div>
                
				<div class="layui-input-inline" style="width: 70px;">
					<button class="layui-btn" id="search" data-type="reload">搜索</button>
				</div>
				<div class="layui-input-inline">
					<button class="layui-btn" lay-event="createClass" id="addPage">添加</button>
				</div>
			</form>
		</div>
		<!--
			编辑弹层
		-->
		<div id="updatePage" style="display: none;">
			<form class="layui-form" action="" onsubmit="return false" lay-filter="updateForm">
			<div class="layui-form-item" style="margin-top: 30px;">
				<label class="layui-form-label"><span style="color: red;">*</span>班级名称:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="hidden" name="classId" />
					<input type="text" name="className"
						lay-verify="uname" class="layui-input" disabled/>
				</div>
			</div>
			<div class="layui-form-item" style="margin-top: 30px;">
				<label class="layui-form-label"><span style="color: red;">*</span>届次:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="classYear"
						lay-verify="uname" class="layui-input" disabled/>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span>辅导员:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<select class="us" name="counselorId">
						<option></option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span>专业:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<select class="ma" name="majorId">
						<option></option>
					</select>
				</div>
			</div>
			<div class="layui-btn-container" style="text-align: center;">
				<button class="layui-btn" id="transmit" lay-submit="" lay-filter="updateClass">保存</button>
			</div>
			</form>
		</div>
		<!--
        	数据表格
        -->
	
    <table class="layui-hide" id="class_table" lay-filter="test">
		
	</table>
   <!--行内工具栏-->
   <script type="text/html" id="barDemo">
   	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
   	<a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
   </script>
		
        
</body>
	<script>
			layui.use(['table', 'form', 'layer', 'laydate', 'upload', 'element'],function(){
				var layer = layui.layer;
				var form = layui.form;
				var table = layui.table;
				var laydate = layui.laydate;
				var upload = layui.upload;
				var element = layui.element;
				var $ = layui.$;
				//渲染用户表
				$.get(globalData.permissionServer + '/user/listUsers', function(res) {
					var html = "";
					for (var i = 0; i < res.data.length; i++) {
						html += "<option value=" + res.data[i].userId + ">" + res.data[i].userName + "</option>"
				
					}
					$(".us").append(html);
				
					form.render('select')
				}, "json")
				//渲染专业表
				$.get(globalData.organizationServer + '/major/listMajors', function(res) {
					var html = "";
					for (var i = 0; i < res.data.length; i++) {
						html += "<option value=" + res.data[i].majorId + ">" + res.data[i].majorName + "</option>"
				
					}
					$(".ma").append(html);
				
					form.render('select')
				}, "json")
				//渲染数据表格
				table.render({
					elem:'#class_table',
					height:400,
					url:globalData.organizationServer+'/class/listClass',
					method:"get",
					//headers: {token: globalData.getCurToken()},//设置请求头
					title:"用户表",
					page:true,
					cols:[
							[
							{
								field:'className',
								title:'班级名称',
								sort:true,
								align:'center'
							},{
								field:'classYear',
								title:'届',
								sort:true,
								align:'center',
							},{
								field: 'counselorId',
								title: '辅导员',
								templet:'<div>{{counselor(d.counselorId)}}</div>'
							},{
								field: 'majorId',
								title: '专业',
								templet:'<div>{{major(d.majorId)}}</div>'
							},{
								field:'createTime',
								title:'创建时间'
								},{
								field:'updateTime',
								title:'最后更新时间'
								},{
								title:'操作',
								align:"center",
								toolbar:'#barDemo'
							}
							]
						],
						id:"testReload",
						done:function(res,curr,count){
						
						}
					});
						
						//添加班级弹出层
						$("#addPage").on('click',function(){
							layer.open({
								type:2,
								title:'添加班级',
								area: ['500px', '400px'],
								content:'class_add.html',
								end:function(){
									//alert(1)
								}
							});
						});
				
				
				active={
					reload:function(){
						var className=$("#className");
						var beginDate=$("#beginDate");
						var endDate=$("#endDate");
						table.reload('testReload',{
							where:{
								'className':className.val(),
								'beginDate':beginDate.val(),
								'endDate':endDate.val()
								},
							curr:{
								page:1
							}
						});
					}
				};
				
				//查询操作
				$("#search").on('click',function(){
					var type=$(this).data('type');
					active[type]?active[type].call(this):'';
				})
				
				
				
//			
	          //行内工具栏监听
				table.on('tool(test)',function(obj){
					var data=obj.data;
					switch(obj.event){
						case 'del':{
						layer.confirm('确认删除该班级吗['+data.className+']的信息吗?',{icon:7},function(index){
							layer.close(index);
						   $.ajax({
								type : "delete",
								url : globalData.organizationServer+'/class/deleteClass',
								data:{
											classId:data.classId
										},//需要传递到服务端的数据
										dataType:'json',//服务端响应数据类型
										xhrFields: {
											withCredentials: true
										},
										// beforeSend: function(request) {
										// 	request.setRequestHeader("token", globalData.getCurToken());
										// },
										success : function(res) {
											if(res.code == 0){
												layer.msg(res.msg,{icon:1,time:2000},function(index){
													table.reload('testReload');
												});
												
											}else{
												layer.msg(res.msg,{icon:2,time:2000});
											}
									}
									});
									
								});
								}
						break;
						case 'update':
						//表单赋值
						form.val('updateForm',data);
						var update_index=layer.open({
							type:1,
							title:'您正在修改['+data.className+']的信息',
							area: ['500px', '500px'],
							content: $('#updatePage'),
							success:function(layero,index){
								//修改提交
								form.on('submit(updateClass)',function(obj){
									//console.log(obj.field);
									$.ajax({
										type : "put",
										url : globalData.organizationServer+'/class/updateClass',
										data:obj.field,//需要传递到服务端的数据
										dataType:'json',//服务端响应数据类型
										xhrFields: {
											withCredentials: true
										},
										// beforeSend: function(request) {
										// 	request.setRequestHeader("token", globalData.getCurToken());
										// },
										success : function(res) {
											if(res.code == 0){
												layer.msg(res.msg,{icon:1,time:2000},function(index){
													layer.close(update_index);
													table.reload('testReload');
												});
												
											}else{
												layer.msg(res.msg,{icon:2,time:2000});
											}
									}
									});
								});
							}
						});
						
						break;
					}
				});
				

			});
			//应用template模板，渲染辅导员
			    function counselor(counselorId){
					
			        var uId = counselorId;
			        var title;
			        $.ajax({
			            url:globalData.permissionServer + '/user/listUsers',//你的后台请求路径
			            dataType:'json',
			            async: false,//同步
			            success:function(data){
							$.each(data.data,function (index,obj) {
								//console.log(obj.userId);
									 if(obj.userId==uId){
			                            title=obj.userName;
			                             
			                        }
			                    });
			            }
			        });
			        return title;
			    };
			//应用template模板，渲染专业
			    function major(majorId){
					
			        var mId = majorId;
			        var title;
			        $.ajax({
			            url:globalData.organizationServer + '/major/listMajors',//你的后台请求路径
			            dataType:'json',
			            async: false,//同步
			            success:function(data){
							$.each(data.data,function (index,obj) {
									 if(obj.majorId==mId){
			                            title=obj.majorName;
			                             
			                        }
			                    });
			            }
			        });
			        return title;
			    };

			
		</script>
</html>